<template>
  <div>
     <div :class="clsObj" @click="m1" @dblclick="m2" @mouseout="m3"></div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data(){
    return{
      clsObj:{
        box:true
      }
    }
  },
  methods:{
    m1(){
      this.$set(this.clsObj,'c1',true)
    },
    m2(){
      Vue.set(this.clsObj,'c2',true)
    },
    m3(){
      this.clsObj={
        ...this.clsObj,
        c3:true
      }
    }
  }
}
</script>

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 50%;
    transition: 3s;
    text-align: center;
    line-height: 100px;
  }
  .c1{
    background: linear-gradient(red,tomato,orange,yellow);
  }
  .c2{
    box-shadow: 10px 10px 10px gray;
  }
  .c3{
    transform: rotate(360deg);
  }
</style>